webpack 构建优化、前端性能优化

构建优化

• alias 别名，加快查找速度
• dll
• extensions 会依次尝试添加扩展名进行匹配，高频扩展名放到前面
• hard-source-webpack-plugin 开启缓存, 使用 cache-loader babel-loader
• IgnorePlugin: 不把制定模块打包进去
• lintOnSave build 关闭
• noParse：无依赖不需要解析，提高整体构建速度
• parallel: terser-webpack-plugin 压缩
• 生产环境：关闭 sourcemap
• thead-loader 开启多进程

前端性能

• DllReferencePlugin(add-asset-html-webpack-plugin): dll 文件，公共文件抽取，防止每次业务代码更新 hash, 更好利用缓存
• compression-webpack-plugin: gzip 压缩文件
• 代码分割：optimization.splitChunks, 将大依赖包 单独打包，防止业务代码更新 hash
• CDN: publicPath，配置 externals
• 动态导入、懒加载：异步加载路由
• preload 是告诉浏览器页面必定需要的资源，浏览器一定会加载这些资源
• 而 prefetch 是告诉浏览器页面可能需要的资源，浏览器不一定会加载这些资源
• tree shaking 无用代码不打包
• js 压缩、TerserPlugin
• css 压缩 OptimizeCSSAssetsPlugin
• 压缩图片：image-webpack-loader
• webpack.optimize.ModuleConcatenationPlugin,所有的模块按照引用顺序放在一个函数作用域里，然后适当地重命名一些变量以防止命名冲突

分析工具

webpack-bundle-analyzer speed-measure-webpack-plugin 分析各种 babel 费时分析

• 基于 webpack 在 VueCLI 进行打包和构建的优化